<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">

        <header1></header1>
        <!-- <%-  include("./header1.ejs") %> -->

        <h1>
            商品管理
            <!-- 以下省略 -->


        </h1>

        <helloworld></helloworld>

    </div>
    <script>
        // import header from './header1'
        // 第一个vue组件 看作外来的组件  <%-  include("./header.ejs") %>
        // 工作中先把组件 写在外部 然后再import 导入！！！！！
        // 面临一个问题为什么  不import导入！？？？？？？
        // 答案 不是说 不外部导入 是因为 不支持import 脚手架里面 因为有babel转译 
        // 帮你把import转译成ES5语法 才能得到支持  
        // import HelloWorld from '@/components/HelloWorld.vue'
        Vue.component('header1', {
            data() {
                return {
                    name: '我是header2233232323'
                }
            },
            beforeMount() {
                console.log('我是header1的 lifeCYle beforemount')
            },
            mounted() { console.log('我是header1的 lifeCYle  mount') },
            beforeUpdate() { console.log('我是header1的 lifeCYle beforeupdate') },
            updated() { console.log('我是header1的 lifeCYle updated') },
            beforeDestroy() { console.log('我是header1的 lifeCYle befordestory') },
            destroyed() { console.log('我是header1的 lifeCYle destroyed') },
            // 如果出现在外部 这个位置 需要在这里写吗？？？

            template: `<div >我是header1页面头部{{name}}</div>`
        })


        // 局部组件定义   先定义一个对象 来模拟一个vue页面 

        var helloworld = {
            data() {
                return {
                    name: '我是footer'
                }
            },
            beforeMount() {
                console.log('我是footter的 lifeCYle beforemount')
            },
            mounted() { console.log('我是footter的 lifeCYle  mount') },
            beforeUpdate() { console.log('我是footter的 lifeCYle beforeupdate') },
            updated() { console.log('我是footter的 lifeCYle updated') },
            beforeDestroy() { console.log('我是footter的 lifeCYle befordestory') },
            destroyed() { console.log('我是footter的 lifeCYle destroyed') },
         

            template: `<div >{{name}} </div>`
        }





        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue22222!'
            },
            // 注册局部组件 
            components:{
                helloworld
            },
            beforeMount() {
                console.log('我是ziji 的 lifeCYle beforemount')
            },
            mounted() { console.log('我是ziji 的 lifeCYle  mount') },
            beforeUpdate() { console.log('我是ziji 的 lifeCYle beforeupdate') },
            updated() { console.log('我是ziji 的 lifeCYle updated') },
            beforeDestroy() { console.log('我是ziji 的 lifeCYle befordestory') },
            destroyed() { console.log('我是ziji 的 lifeCYle destroyed') },
        })
    </script>
</body>

</html>